<!--
 * 验证码倒计时组件
-->
<template>
	<page-layout class="page-layout">
		<!-- 基础使用 -->
		<app-demo-module
			title="基础使用"
			desc="该组件没有元素，是一个组合式函数"
		>
			<pure-button
				:text="tips"
				@tap="handleSendSMSCode"
				:disabled="isCountdown"
				theme="primary"
			></pure-button>
		</app-demo-module>
	</page-layout>
</template>

<script setup>
import { ref, computed } from "vue";
import { usePureCodeCountdown } from "@/uni_modules/pure/functions";

// 按钮默认文本
const btnText = ref("发送验证码");
// 倒计时总秒数
const totalSeconds = ref(30);

// 按钮提示
const tips = computed(() => {
	// 正在倒计时中
	if (isCountdown.value) {
		return `${seconds.value}s后重新获取`;
	}
	return btnText.value;
});

// 使用
const { seconds, start, isCountdown } = usePureCodeCountdown(
	"in-page-code-countdown",
	totalSeconds,
	countdownEndFn
);

// 倒计时结束函数
function countdownEndFn() {
	console.log("倒计时结束");
	btnText.value = "重新发送";
}

// 发送验证码
function handleSendSMSCode() {
	start();
}
</script>

<style scoped lang="scss"></style>
